原型图绘制工具对比
Axure RP
Axure是最经典的客户端原型图工具。核心功能包括：
- 页面管理：左侧目录树管理页面，支持多级目录嵌套
- 绘图区域：中间为画布，支持拖拽组件和自由绘制
- 模板系统：可以将常用的布局保存为Master（母版），在多个页面中复用
- 交互设计：支持简单的页面跳转和状态切换模拟
在线工具对比
| 工具 | 优势 | 劣势 | 适用场景 |
|---|---|---|---|
| Figma | 实时协作、AI插件支持 | 国内访问需VPN | 团队协作 |
| MasterGo | 国产Figma替代品 | 生态还在建设中 | 国内团队协作 |
| ProcessOn | 支持多种图表类型 | 原型功能较弱 | 流程图为主 |
| 蓝湖 | 设计交付一体化 | 需配合设计工具使用 | 设计师-开发协作 |
| 墨刀 | 上手快、模板丰富 | 复杂交互支持有限 | 快速原型 |
使用模板快速绘制
以首页项目为例，原型图绘制可以遵循以下流程：
第一步：建立基础画布
首页项目通常以1920x1080（标准PC分辨率）为画布尺寸。这是最常见的桌面端设计尺寸，也是响应式设计的基准尺寸。
第二步：绘制基础布局
首页通常有固定的头部（Header）和底部（Footer），中间是可变的内容区域：
- 头部（Header）：高度约80px，包含导航菜单、Logo、搜索框、登录按钮
- 底部（Footer）：高度约220px，包含网站介绍、友情链接、版权信息
- 内容区（Main）：可滚动区域，根据功能需求灵活排列
第三步：创建母版模板
将头部和底部的组合保存为Master模板。后续新建页面时，双击模板即可自动应用，避免重复绘制。
第四步：填充功能模块
在内容区域按优先级排列功能模块：
- 轮播图/广告位（第一屏）
- 课程分类/热门推荐
- 精选内容展示
- 教师推荐/学员评价
- CTA（行动号召）区域
原型图绘制的注意事项
- 线框为主：原型图阶段不需要追求视觉细节，重点是表达清楚页面结构和交互逻辑
- 保持一致性：相同功能的组件在不同页面保持一致的样式和位置
- 标注交互：用箭头或说明文字标注页面间的跳转关系
- 移动端适配：PC端设计完成后，单独绘制移动端的原型图（通常以375px宽度为基准）
↑